<template>
    <el-popover placement="top-start" width="200" trigger="hover">
      <template #reference>
        <el-input v-model="keyword" style="max-width: 200px" @input="onInput"
                  placeholder="Please input" class="input-with-select">
          <template #append>
            <i class="fa fa-fw fa-search"></i>
          </template>
        </el-input>
      </template>
      <el-tree ref="treeRef" default-expand-all :data="tree" @node-click="()=>{}"
               :filter-node-method="filterNode"></el-tree>
    </el-popover>
</template>

<script setup>
import Bamboo from "@/lang/bamboo/index";
import {ref} from "vue";


let list = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '三级 1-1-2'}
    , {id: 11, label: '一级 2'}
];

// 树形工具
const builder = Bamboo.builder();
// 根节点
const keyword = ref('');

// default list
let def;
if(Layers.isNotEmpty(list)){
    def = builder
        .setMapper(Bamboo.defaultMapper).setParents(list)
        .groupBy().getRoot();
} else {
    def = [];
}
const tree = ref(def);

// Reference
const treeRef = ref()

const onInput = (val) => {
    treeRef.value.filter(val)
}

const filterNode = (value, data) => {
    if (!value) return true
    return data.label.includes(value)
}

</script>

<style scoped>
</style>